<template>
    <teleport :to='props.teleport'>
       
        <!-- <slot name="left"></slot>
        <slot name="right"></slot> -->

        <!-- 
            一个一个绑定, 需要手动绑定多次
            :title="props.title" :left-arrow="props.leftArrow"

            一次性绑定:需要绑定多次 

             v-bind="props"   props对象 属性名不能用驼峰式命名法
         -->
        <van-nav-bar 
         
        :class="attrs?.class"
        :style="attrs?.style"
        :title="props.title"
        :left-arrow="props.leftArrow"
        :left-text="props.leftText"
        :right-text="props.rightText"
        :z-index="props.zIndex"
        :fixed="props.fixed"
        :left-disabled="props.leftDisabled"
        :right-disabled="props.rightDisabled"
        :placeholder="props.placeholder"
        :clickable="props.clickable"
        :border="props.border"

        @click-left="emits('click-left')"
        @click-right="emits('click-right')"
        >
            <!--van-nav-bar 传递的插槽内容  -->
            <!-- CommonHeader对应插槽名接收的内容 -->
            <template #title v-if="slots.title">
                <slot name="title"></slot>
            </template>
            <template #left  v-if="slots.left">
                <slot name="left"></slot>
            </template>
            <template #right v-if="slots.right">
                <slot name="right" ></slot>
            </template>
        </van-nav-bar>
    </teleport>
</template>

<script setup lang="ts">
    import type { NavBarProps } from 'vant';
    import { useAttrs } from 'vue';
/* 
    头部组件接收属性  

    navBar原本接收的属性
    参数	说明	类型	默认值
    title	标题	string	''
    left-text	左侧文案	string	''
    right-text	右侧文案	string	''
    left-disabled v4.6.8	是否禁用左侧按钮，禁用时透明度降低，且无法点击	boolean	false
    right-disabled v4.6.8	是否禁用右侧按钮，禁用时透明度降低，且无法点击	boolean	false
    left-arrow	是否显示左侧箭头	boolean	false
    border	是否显示下边框	boolean	true
    fixed	是否固定在顶部	boolean	false
    placeholder	固定在顶部时，是否在标签位置生成一个等高的占位元素	boolean	false
    z-index	导航栏 z-index	number | string	1
    safe-area-inset-top	是否开启顶部安全区适配	boolean	false
    clickable	是否开启两侧按钮的点击反馈	boolean	true

    我们自己新增的
    teleport  将teleport组件内包裹的元素,传递给指定元素


    接收的事件
    事件名	说明	回调参数
    click-left	点击左侧按钮时触发	event: MouseEvent
    click-right	点击右侧按钮时触发	event: MouseEvent

    接收插槽内容
    title	自定义标题
    left	自定义左侧区域内容
    right	自定义右侧区域内容
 */
    interface Tel {
        teleport:string,
    }

    interface MineNavBarProps extends NavBarProps,Tel{}

    const props = defineProps({
        title:{
            type:String,
            default:"头部",
        },
        leftText:{
            type:String,
            default:"",
        },
        rightText:{
            type:String,
            default:"",
        },
        zIndex:{
            type:Number,
            default:1,
        },
        fixed: {
            type:Boolean,
            default:false
        },
        border: {
            type:Boolean,
            default:true
        },
        leftDisabled: {
            type:Boolean,
            default:false
        },
        rightDisabled: {
            type:Boolean,
            default:false
        },
        leftArrow: {
            type:Boolean,
            default:false
        },
        placeholder: {
            type:Boolean,
            default:false
        },
        safeAreaInsetTop: {
            type:Boolean,
            default:false
        },
        clickable: {
            type:Boolean,
            default:false
        },
        teleport:{
            type:String,
            default:"",
        },
        // leftText:"",
        // rightText:"",
        // zIndex:1,
        // fixed: false,
        // border: true,
        // leftDisabled: false,
        // rightDisabled: false,
        // leftArrow: false,
        // placeholder: false,
        // safeAreaInsetTop: false,
        // clickable: false,
        // teleport:"",
    })

    const emits = defineEmits(["click-left","click-right"]);

    const slots = defineSlots();

    const attrs = useAttrs();
    console.log(11111, props);
    console.log(22222, slots);
    

    

</script>

<style scoped></style>